<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    本地引入-->
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
       常用指令    {{ 变量名 }}
         1. v-text    可以渲染标签内容  但是默认的值会被覆盖    无法识别html标签  会解析会纯文本
              v-text="info"    "info" 不要理解为字符串  而是需要动态渲染的值  对应的是vue实例中data属性名
         2. v-html    可以渲染标签内容  但是默认的值会被覆盖    可以识别html标签
-->
<!--初始化容器-->
<div id="app">
    <p>info:{{info}}</p>
    <p v-text="info">v-text</p>
    <p v-text="info.toUpperCase()">v-text</p>
    <p v-html="message"></p>
</div>

<!--创建vue实例-->
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            info: 'hello',
            message:'<b>Hello Vue</b>'
        }
    })

</script>
</body>
</html>
